<template>
  <a-modal
    title="新增工艺路线"
    width="80%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24">
          <a-col :md="12" :sm="24">
            <a-form-item label="名称" :labelCol="labelCol_T" :wrapperCol="wrapperCol_T" has-feedback>
              <a-input
                placeholder="请输入工艺路线名称"
                v-decorator="['name', { rules: [{ required: true, message: '请输入工艺路线名称！' }] }]"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <WorkRouteTable
          :oldTableData="tableData"
          :key="value"
          @new-table-data="(newTableData)=>{tableData=newTableData}">
        </WorkRouteTable>

        <a-form-item label="备注信息" :labelCol="labelCol" :wrapperCol="wrapperCol" has-feedback>
          <a-textarea
            :rows="3"
            placeholder="请输入备注"
            v-decorator="['remarks', { rules: [{ required: false, message: '请输入备注！' }] }]"
          />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import { workRouteAdd } from '@/api/modular/main/workroute/workRouteManage'
import WorkRouteTable from './workRouteTable.vue'
export default {
  components: { WorkRouteTable },
  data() {
    return {
      tableData: [],
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      labelCol_T: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol_T: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      value: 0
    }
  },
  methods: {
    // 初始化方法
    add(record) {
      //  通过改变子组件的key来刷新子组件的数据
      this.value++
      this.visible = true
      this.tableData = []
      if (!record) {
        return
      }
      this.tableData = record.workStepRouteList
    },
    /**
     * 提交表单
     */
    handleSubmit() {
      const {
        form: { validateFields }
      } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          for (const key in values) {
            if (typeof values[key] === 'object' && values[key] != null) {
              values[key] = JSON.stringify(values[key])
            }
          }
          // 工艺路线关系
          this.tableData.forEach((element, index) => {
            element.sortNum = index + 1
          })
          const workStepIdList = Array.from(this.tableData, item => { return { sortNum: Number(item.sortNum), workStepId: item.workStepId } })
          const workStepRouteList = {
            code: values.code,
            name: values.name,
            remarks: values.remarks,
            list: workStepIdList
          }
          workRouteAdd(workStepRouteList)
            .then((res) => {
              if (res.code === 200) {
                this.$message.success('新增成功')
                this.confirmLoading = false
                this.$emit('ok', values)
                this.handleCancel()
              } else {
                this.$message.error(res.message) // + res.message
              }
            })
            .finally((res) => {
              this.confirmLoading = false
            })
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel() {
      this.form.resetFields()
      this.visible = false
      this.$emit('ok')
    }
  }
}
</script>

<style scoped>
</style>
